<template>
  <div class="bottomLeft">
    <div class="bg-color-black">
      <div class="box-title">
        <img :src="img" class="title-img" style="height: 16px" alt="" />
        岗位需求城市分布TOP10
      </div>
      <div>
        <div ref="chartRef" class="chartBox" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps, watch, nextTick, toRaw } from "vue";
import * as echarts from "echarts";
import { getTopTen } from "@/api/dataView";


const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
const props = defineProps(['selectId']);

// 定义 ref
const chartRef = ref();
const myChart = ref(null);
const img = ref(require("@/assets/three.png"));
const allAata = ref()

watch(()=>props.selectId, (newVal)=>{
  if(props.selectId || props.selectId == 0) {
    getTopTenList(newVal)
  }
},{
  immediate: true,
  deep: true
})

// 配置项
// let options = ref();
// 获取前十数据
async function getTopTenList(id) {
  const res = await getTopTen(id)
  // console.log('resres', res)
  let list1 = []
  let list2 = []
  if(res.data.length > 0) {
    res.data.forEach((item)=>{
      list1.push(item.name)
      list2.push(item.number)
    })
  }
  allAata.value = {
    list1,
    list2
  }
  inintData()
}

function inintData() {
  const data = {...toRaw(allAata.value)}
  const list1 = data.list1
  const list2 = data.list2
  let options = {
    grid: {
      left: '15%'
    },
    xAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "#212d45",
        },
      },
      axisLabel: {
        color: "white",
      },
    },
    yAxis: {
      type: "category",
      data: list1,
      axisLabel: {
        color: "white",
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      {
        data: list2,
        type: "bar",
        barWidth: 14,
        itemStyle: {
          normal: {
            label: {
              formatter: "{c}",
              show: true,
              position: "right",
              textStyle: {
                fontWeight: "bolder",
                fontSize: "10",
                color: "white",
              },
            },
          },
        },
      },
    ],
  }
  // console.log('options', options)
  nextTick(()=>{
    // console.log('options', options)
     myChart.value = echarts.init(chartRef.value);
     unwarp(myChart.value).setOption(options);
  })
}

onMounted(async () => {
  // await getTopTenList();
  // inintData();
});
</script>

<style lang="scss" scoped>
$box-height: 520px;
$box-width: 100%;
.bottomLeft {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;

  .box-title {
    height: 40px;
    border-left: 5px solid #409eff;
    background-color: #081f43;
    padding-left: 25px;
    box-sizing: border-box;
    position: relative;
    line-height: 40px;
    .title-img {
      position: absolute;
      left: 6px;
      top: 12px;
    }
  }
}
.chartBox {
  width: 400px;
  height: 460px;
}
</style>
